<template>
        <el-container  class="st-height-100-pc">
        <el-aside width="200px" class="st-flex-center-all st-font-size-elg st-color-fff st-height-100-pc" style="background-color: #313131;">

          <div class="st-flex-center-all st-width-100-pc">
            <img alt="scatter logo" src="../../assets/scatter-logo.png" style="width: 20px;height: 20px;margin-right: 10px;"></img> <span style="font-size: 20px;">scatter</span></div>
        </el-aside>
        <el-main class="st-color-fff st-padding-0">
            <el-row type="flex" class="st-height-100-pc" justify="space-between">
                <el-col class="st-height-100-pc st-flex-align-cross-center">
                    <StElBreadcrumb class="index-top-header-breadcrumb"></StElBreadcrumb>
                </el-col>
                <el-col class="st-height-100-pc st-flex-align-cross-center st-flex-align-end">
                    <!-- 右侧 头像和用户名 -->
                    <UserinfoDropdown class="item" :current-userinfo="currentUserinfo" :userinfo-loading="userinfoLoading"></UserinfoDropdown>
                </el-col>
            </el-row>
        </el-main>
        </el-container>
</template>

<script>
    import UserinfoDropdown from './UserinfoDropdown.vue'
    import IdentifierUserUrl from '../../../../../../../components/identifier/web/pc/IdentifierUserUrl.js'

    export default {
        components: {
            UserinfoDropdown,
        },
        data (){
            return {
                userinfoLoading: false,
                currentUserinfo:{}
            }
        },
        mounted(){
            this.getUserinfo()
        },
        methods:{
            getUserinfo(){
                this.userinfoLoading = true
                this.axios.get(IdentifierUserUrl.loginUserinfo).then(res => {
                    this.currentUserinfo = res.data
                }).catch((error) => {
                    if(error.response){
                        if(error.response.status == 401){
                            return
                        }
                        if(error.response.data && error.response.data.errorMsg){
                            this.$message.error(error.response.data.msg)
                        }
                    }else{

                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.userinfoLoading = false
                })
            }
        }
    }
</script>

<style scoped>

</style>
<style>
    .index-top-header-breadcrumb{
        margin-left: 5px;
    }
    .index-top-header-breadcrumb .el-breadcrumb__inner{
        color: #fff !important;
    }
    .index-top-header-breadcrumb .el-breadcrumb__inner a:hover{
        color: #fffdc7;
    }
    .index-top-header-breadcrumb .el-breadcrumb__inner a{
        color: #fffdf4;
    }
</style>